<template>
    <view>
        <view class="uni-padding-wrap" :style="'direction:' + $t('dir')" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
            <navbar :title="$t('house_filim')" :minHeight="0" titleColor="white" backColor="white" bgLayer="transparent" navbarBg="transparent"> </navbar>
            <view class="page-section swiper main">
                <view class="page-section-spacing">
                    <swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="current" :circular="true" :vertical="true">
                        <swiper-item v-for="(item, index) in PayVideo" :key="index">
                            <!-- <video :id="`video-${index}`" class="video" :src="item.video" :enable-play-gesture="true" :enable-progress-gesture="true" :controls="false" :show-center-play-btn="false" :loop="true" @click="handlePlayBtnClick"></video> -->

                            <!-- <video :id="`video-${index}`" class="video" :src="item.video" :enable-play-gesture="true" :enable-progress-gesture="true" :controls="false" :show-center-play-btn="false" :loop="true" :initial-time="0" :show-loading="true" :object-fit="'contain'" @click="handlePlayBtnClick"></video> -->
                            <video :id="`video-${index}`" class="video" :src="item.video" :enable-play-gesture="true" :enable-progress-gesture="true" :controls="false" :show-center-play-btn="false" :loop="true" :initial-time="0" :show-loading="true" :object-fit="'cover'" :enable-danmu="false" :show-fullscreen-btn="false" :show-play-btn="false" :show-progress="false" :vslide-gesture="false" :vslide-gesture-in-fullscreen="false" @click="handlePlayBtnClick"></video>
                            <!-- 播放/暂停按钮 -->
                            <view class="play-btn" :style="{ left: `50%`, top: `50%` }" v-if="!isPlaying" @click.stop="handlePlayBtnClick">
                                <image src="/static/images/filim/play.png" style="height: 100%; width: 100%"></image>
                            </view>

                            <!-- 视频信息 -->
                            <view v-if="item.broker" style="position: fixed; bottom: env(safe-area-inset-bottom); left: 0; width: 100%; box-sizing: border-box; padding: 36rpx; background: black" class="text-white">
                                <cover-view class="row items-center justify-between">
                                    <cover-view class="row items-center">
                                        <cover-image :src="item.broker.avatar" style="width: 100rpx; height: 100rpx" class="rounded-50"></cover-image>
                                        <cover-view class="mx-sm">
                                            <cover-view class="fs-md">{{ item.broker['name' + $t('k1')] }}</cover-view>
                                            <!-- <cover-view class="row items-center mt-xs">
                                                <cover-image src="/static/images/filim/renzheng.png" style="width: 56rpx; height: 44rpx"></cover-image>
                                                <cover-view class="bg-white text-gray fs-xs mx-xs" style="padding: 4rpx 14rpx; border-radius: 4rpx">مەنزىل</cover-view>
                                            </cover-view> -->
                                        </cover-view>
                                    </cover-view>

                                    <cover-view class="row items-center">
                                        <!-- <cover-view class="text-center mx-md">
                                            <cover-image src="/static/images/filim/fenxiang.png" mode="" style="width: 60rpx; height: 60rpx"></cover-image>
                                            <cover-view class="mt-sm fs-md">397</cover-view>
                                        </cover-view>
                                        <cover-view class="text-center mx-md">
                                            <cover-image src="/static/images/filim/pinglun.png" mode="" style="width: 60rpx; height: 60rpx"></cover-image>
                                            <cover-view class="mt-sm fs-md">397</cover-view>
                                        </cover-view> -->
                                        <cover-view class="text-center mx-md" @click="sellHouseVideoLike(item)">
                                            <cover-image :src="item.isLike ? '/static/images/filim/zan-1.png' : '/static/images/filim/zan.png'" mode="" style="width: 60rpx; height: 60rpx"></cover-image>
                                            <!-- <u-icon :name="item.isLike ? 'heart-fill' : 'heart'" size="60rpx" :color="item.isLike ? 'red' : ''"></u-icon> -->
                                            <cover-view class="mt-sm fs-md">{{ item.likeNum }}</cover-view>
                                        </cover-view>
                                    </cover-view>
                                </cover-view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <!--  登录弹出层  -->
        <login-popup :show="loginPopupShow" @close="loginPopupShow = false" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            loginPopupShow: false,
            data: [],
            index_: 1,
            index: '1',
            active: 2,
            PayVideo: [],
            current_i: 2,
            _arr: [],
            len: 0,

            playing: true,
            showPlayBtn: false,
            loading: false,
            isPlaying: false,
            currentVideoContext: null,
            current: 0,
            isManualPaused: true,

            last_page: 1,
            current_page: 1,
        }
    },
    computed: {
        headerArea() {
            let area = uni.getSystemInfoSync()
            // #ifdef MP-WEIXIN
            let menu = uni.getMenuButtonBoundingClientRect()

            console.log('area:', area)
            console.log('menu:', menu)

            return {
                status_height: area.statusBarHeight,
                title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
                menuLeft: menu.left,
                menuTop: menu.top - (menu.top - area.statusBarHeight),
            }
            // #endif
            // #ifndef MP-WEIXIN
            return {
                status_height: area.statusBarHeight,
                title_height: uni.upx2px(82),
                menuLeft: 0,
                menuTop: 0,
            }
            // #endif
        },
    },
    props: {
        ind: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        // فىلىم قويۇش/توختىتىش
        handlePlayBtnClick() {
            const videoContext = uni.createVideoContext(`video-${this.current}`, this)
            if (videoContext) {
                if (this.isPlaying) {
                    videoContext.pause()
                    this.isPlaying = false
                } else {
                    videoContext.play()
                    this.isPlaying = true
                }
            }
        },

        changefun(e) {
            const current = e.detail.current
            this.current = current

            // بارلىق فىلىملەرنى توختىتىش
            this.pauseAllVideos()

            // يېڭى فىلىمنى قويۇش
            this.$nextTick(() => {
                const videoContext = uni.createVideoContext(`video-${current}`, this)
                if (videoContext) {
                    setTimeout(() => {
                        videoContext.play()
                        this.isPlaying = true
                    }, 100)
                }
            })

            // كېيىنكى بەتنى يۈكلەش
            if (this.PayVideo.length - current <= 2) {
                this.loadMoreVideos()
            }
        },
        // بارلىق فىلىملەرنى توختىتىش
        pauseAllVideos() {
            // نۆۋەتتىكى بارلىق فىلىملەرنى توختىتىش
            for (let i = 0; i < this.PayVideo.length; i++) {
                if (i !== this.current) {
                    // نۆۋەتتىكى فىلىمنى ھېسابلىمايمىز
                    const videoContext = uni.createVideoContext(`video-${i}`, this)
                    if (videoContext) {
                        videoContext.pause()
                        videoContext.seek(0) // فىلىمنى باشتىن باشلاش
                    }
                }
            }
        },
        // ئانىماتسىيە تاماملانغاندا
        animationfinishfun(e) {
            const current = e.detail.current

            if (!this.isManualPaused) {
                // بارلىق فىلىملەرنى توختىتىش
                this.pauseAllVideos()

                this.$nextTick(() => {
                    this.currentVideoContext = uni.createVideoContext(`video-${current}`, this)
                    if (this.currentVideoContext) {
                        try {
                            this.currentVideoContext.play()
                            this.isPlaying = true
                        } catch (error) {}
                    }
                })
            }
        },
        loadMoreVideos() {
            // ئەگەر 8-فىلىمغا كەلگەندە كېيىنكى بەتنى يۈكلەيمىز
            if (this.current_page < this.last_page && this.current >= 8) {
                this.current_page++
                this.$uniapi('/video', { page: this.current_page }).then((res) => {
                    let d = res.data
                    // يېڭى فىلىملەرنى _arr غا ۋە PayVideo غا قوشىمىز
                    const newVideos = d.data.map((item) => ({
                        ...item,
                        isLike: false,
                    }))
                    this._arr = [...this._arr, ...newVideos]
                    this.PayVideo = [...this.PayVideo, ...newVideos]
                })
            }
        },
        // دەسلەپكى فىلىمنى قويۇش
        initVideoPlay() {
            this.$nextTick(() => {
                this.pauseAllVideos()
                // فىلىمنى قايتا يۈكلەش
                const firstVideo = this.PayVideo[0]
                if (firstVideo) {
                    const videoContext = uni.createVideoContext('video-0', this)
                    if (videoContext) {
                        // فىلىمنى قايتا يۈكلەش
                        videoContext.seek(0)
                        videoContext.stop()

                        setTimeout(() => {
                            this.isManualPaused = false
                            videoContext.play()
                            this.isPlaying = true
                            this.currentVideoContext = videoContext
                        }, 100)

                        // ئەگەر قويۇلمىسا قايتا سىناش
                        setTimeout(() => {
                            if (!this.isPlaying) {
                                videoContext.seek(0)
                                videoContext.play()
                            }
                        }, 500)
                    }
                }
            })
        },
        getVideo() {
            this.$uniapi('/video', { page: this.current_page }).then((res) => {
                let d = res.data
                this.PayVideo = d.data
                this.current_page = d.current_page
                this.last_page = d.last_page
            })
        },
        sellHouseVideoLike(item) {
            let token = uni.getStorageSync('token')
            if (!token) {
                this.loginPopupShow = true
                return
            }
            this.$uniapi('/sellHouseVideoLike', { id: item.id }, 'post').then((res) => {
                if (res.code == 0) {
                    item.isLike = !item.isLike
                    item.likeNum = item.isLike ? item.likeNum + 1 : item.likeNum - 1
                }
            })
        },
        getVideoList() {
            this.$uniapi('/video', { page: this.current_page }).then((res) => {
                let d = res.data
                this.current_page = d.current_page
                this.last_page = d.last_page
            })
        },
    },
    // mounted دا دەسلەپكى ھالەتنى تەڭشەش
    async mounted() {
        await this.$uniapi('/video', { page: this.current_page }).then((res) => {
            let d = res.data
            this._arr = d.data.map((item) => ({
                ...item,
                isLike: false,
            }))

            this.PayVideo = [...this._arr]
            this.current_page = d.current_page
            this.last_page = d.last_page

            // دەسلەپكى ھالەتنى تەڭشەش
            this.isPlaying = false
            this.current = 0
        })
    },
    // uni.setStorageSync('video', this.data)
}
</script>

<style scoped lang="scss">
.swiper {
    height: 100vh;
    .swiper-item {
        height: 100vh;
        position: relative;
    }
}

.video {
    width: 100%;
    height: 100vh;
    position: relative;
}

.play-btn {
    height: 90rpx;
    width: 78rpx;
    border-radius: 50%;
    position: absolute;
    margin-left: -34rpx;
    margin-top: -34rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.loading {
    position: absolute;
    height: 60rpx;
    width: 60rpx;
    margin-left: -30rpx;
    margin-top: -30rpx;
}
</style>
